<script setup lang="ts">
// 在制、在库、在途订单金额汇总
import { storeToRefs } from 'pinia'
import { useSupplyStore } from '@/stores/module/supply'

const supplyStore = useSupplyStore() // 创建store实例
const { moneySummary } = storeToRefs(supplyStore)
</script>
<template>
  <el-carousel-item>
    <card-box>
      <template v-slot:title>
        <h1>{{ moneySummary.title || '' }}</h1>
      </template>
      <div
        class="main-div"
        v-if="moneySummary.info && moneySummary.info.length > 0"
      >
        <el-row>
          <el-col
            :span="8"
            v-for="(item, key) in moneySummary.info"
            class="item"
          >
            <template v-if="key < 3">
              <img src="@/assets/images/supply/money.png" alt="i18n" />
              <p class="item-value">{{ item.value }}</p>
              <p class="item-name">{{ item.name }}</p>
            </template>
          </el-col>
        </el-row>
      </div>
      <div v-else class="default-img">
        <p>{{ $t('bi_common_nodata') }}</p>
      </div>
    </card-box>
  </el-carousel-item>
</template>
<style lang="scss" scoped>
.main-div {
  position: relative;
  width: 100%;
  height: calc(
    260px - 45px
  ); // 45px 是标题 35 高度+10px 轮播图指示器预留空间高度
  .item {
    height: 100%;
    text-align: center;
    // 垂直居中
    img {
      margin-top: 35px;
      width: 78px;
      height: 73px;
      -webkit-user-drag: none;
    }
    .item-value {
      margin-top: 17px;
      height: 16px;
      font-size: 14px;
      font-weight: 400;
      color: #00e4ff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .item-name {
      margin-top: 13px;
      height: 15px;
      font-size: 13px;
      font-weight: 400;
      color: #ffffff;
    }
  }
}

.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
</style>
